<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head th:replace="nav :: navHeader(~{::title},~{::link})">
    <title>tinyservices-id</title>
    <link rel="stylesheet" type="text/css" th:href="@{css/index.css}"/>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">tinyservices-id</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>

            <li class="layui-nav-item layui-show-xs layui-hide-sm"><a href="">tinyservices-id</a></li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree vertica_nav " lay-filter="NavData">
                <li class="layui-nav-item layui-this"><a data-status="segment" href="javascript:">Segment</a></li>
<!--                <li class="layui-nav-item"><a data-status="snowflake" href="javascript:">雪花Snowflake</a></li>-->
                <li class="layui-nav-item"><a data-status="token" href="javascript:">Token</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <iframe id="winCon" name="winCon" src="/html/segment"></iframe>
    </div>

    <div class="layui-footer">
        <a target="_blank" href="https://gitee.com/tinyservices/tinyservices-id">https://gitee.com/tinyservices/tinyservices-id</a>
    </div>
</div>
<div th:include="nav::navFooter" ></div>
<script>
    //JS
    layui.use(['element', 'layer', 'util'], function(){
        let element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,$ = layui.$;

        //点击导航栏触发
        element.on('nav(NavData)', function(elem) {
            const navData = elem.attr("data-status");
            const child = elem.attr("data-children");
            //判断是否是top顶级菜单
            if(navData!=="top") {
                loadEvent(navData,child);
            }
        });

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function(){
                let leftVal = $(".layui-layout-admin .layui-side").css("left").replaceAll("px","");
                if(leftVal < 0){
                    $(".layui-layout-admin .layui-side").css({"left":"0px"});
                }else{
                    $(".layui-layout-admin .layui-side").css({"left":"-300px"});
                }

            }
        });

        /**
         * 菜单内容加载（跳转）
         * @param navData 菜单主栏目标签值 data-status
         * @param children 菜单子栏目标签值 data-children
         */
        function loadEvent(navData,children){
            const $iFrame=$("#winCon");
            let child;
            if(children === undefined){
                child = "/html/"+navData;
            }else {
                child = "/html/"+navData+"/"+children;
            }
            $iFrame.prop("src",child);
        }

        //窗口变化区域
        $(window).resize(function() {
            //获取浏览器窗口宽度
            let window_width = $(window).width();
            if(window_width>768){
                $(".layui-layout-admin .layui-side").css({"left":"0px"});
            }else{
                $(".layui-layout-admin .layui-side").css({"left":"-300px"});
            }
        });
    });
</script>
</body>
</html>